<template>
    <div ref="dom" class="chart" />
</template>

<script setup lang="ts">

import {defineProps, onMounted, ref, Ref}                                                                      from "vue";
import * as echarts                                                                                            from "echarts/core";
import {GeoComponent, LegendComponent, TitleComponent, ToolboxComponent, TooltipComponent, VisualMapComponent} from "echarts/components";
import {MapChart, ScatterChart}                                                                                from "echarts/charts";
import {CanvasRenderer}                                                                                        from "echarts/renderers";
import {useEventListener}                                                                                      from "@vueuse/core";
import router                                                                                                  from "@/router";
import {provinceConfig}                                                                                        from "@/views/main/dashboard/config";
import {registerAll}                                                                                           from "@/views/main/dashboard/map/mapData/allMap";
import obj2arr                                                                                                 from "@/utils/obj2arr";
import {options}                                                                                               from "@/views/main/dashboard/map/options";

const props = defineProps({
    gardenList: {
        type   : Array,
        default: []
    }
})

// dom元素
const dom: Ref<HTMLDivElement> = ref(null) as any

// eChart 实例
let myEchart: echarts.ECharts | null = null

let emit = defineEmits(['clickProvince'])

// 使用Echart
function useEchart() {
    return new Promise((resolve) => {
        echarts.use([
            CanvasRenderer, MapChart, ScatterChart, GeoComponent,
            TitleComponent, TooltipComponent, ToolboxComponent,
            LegendComponent, VisualMapComponent,
        ]);

        // 注册所有map
        registerAll()

        myEchart = echarts.init(dom.value)

        // 点击事件
        myEchart.on('click', function (params: any) {
            // 散点事件
            if (params?.componentSubType === "scatter") {
                router.push({
                    path : "/garden/statistics",
                    query: {
                        gardenId  : params?.data?.gardenId,
                        gardenName: params?.data?.name,
                    }
                })
            }
            // 打印点击的数据
            if (params?.componentSubType === "map" && params?.data?.name) {
                jumpTo(params.data.name)
            }
        });

        myEchart.getZr().on('click', function (params: any) {
            // 点击外部,回到全图
            if (!params.topTarget) {
                jumpTo("全国")
            }
        })

        // 页面尺寸变化,echart同步变化
        useEventListener("resize", () => myEchart!.resize())

        resolve("ok")
    })
}

function jumpTo(name: string) {
    if (name === "台湾省") {
        return
    }

    // 通知父组件
    emit("clickProvince", name)

    let myProvince = structuredClone(provinceConfig)

    // 地图名称
    let mapName = (name === "全国" ? "lack" : "full") + myProvince[name].code

    // 筛选需要的数据
    let gardenList = name === "全国" ? props.gardenList : props.gardenList?.filter((one: any) => one.province === name)

    // 映射散点需要的数据:用于tooltip和散点绘制
    let scatterData = gardenList.map((one: any) => {
            return {
                gardenId: one.id,
                name    : one.name,
                value   : one.lngLat.split(","),
                size    : one.size,
                type    : one.type,
            }
        }
    )

    // 热力图统计
    gardenList.forEach((cur: any) => {
        myProvince[cur.province].value += 1
    })
    let provinceData = name === "全国" ? obj2arr(myProvince, "name") : []

    // 地图
    options.geo.map    = mapName
    options.geo.center = myProvince[name].center

    // 映射,热力图
    options.visualMap.show = name === "全国"
    options.visualMap.max  = name === "全国" ? Math.max(...provinceData.map((item: any) => item.value)) : 500

    // 热力图
    options.series[0].map          = mapName
    options.series[0].data         = provinceData
    options.series[0].tooltip.show = name === "全国"

    // 散点图
    options.series[1].data = scatterData

    myEchart?.setOption(options)
}

// --------------------------- 生命函数 ---------------------------
onMounted(() => {
    useEchart().then(() => jumpTo("全国"))
})

</script>

<style lang="scss" scoped>
.chart {
    width: 100%;
    height: 100%;
}
</style>
